<template>
	<view class="videoPlayer">
		<video class="video" 
		id="myVideo"
		:loop="true" 
		:controls="false" 
		custom-cache="false" 
		:src="'http://localhost:8099/static/videos/'+video.name" 
		controls
		@click="clickMe"
		:autoplay="autlala"></video>
		<!-- {{video.author}}
		{{video.id}} -->
	</view>
</template>
<script>
	let timer = null;
	export default {
		props:['video','index'],
		name:"videoPlayer",
		data() {
			return {
				play:false,
				dblClick:false,
				autlala:false
			};
		},
		onReady(){
			this.videoContext=uni.createVideoContext('myVideo',this)
		},
		methods:{
			clickMe(){
				this.autlala=true;
				clearTimeout(timer);
				this.dblClick=!this.dblClick;
				timer=setTimeout(()=>{
					if(this.dblClick){
						if(this.play===false){
							this.playNow();
						}else{
							this.pause();
						}
					}else{
						console.log('进行了双击！');
						this.$emit('changeClick')
					}
					this.dblClick=false;
				},300)
				
			},
			player(){
				if(this.play===false){
					this.play=true;
					this.videoContext.seek(0);
					this.videoContext.play();
				}
			},
			pause(){
				if(this.play===true){
					this.play=false;
					this.videoContext.pause();
				}
			},
			playNow(){
				if(this.play===false){
					this.play=true;
					this.videoContext.play();
				}
			},
			auto(){
				if(this.index==0){
					this.autlala=true;
					this.play=true;
				}else{
					this.autlala=false;
				}
			}
		},
		created(){
			this.auto();
			// console.log(this.index);
		}
	}
</script>

<style>
.videoPlayer{
	width: 100%;
	height: 100%;
}
.video{
	width: 100%;
	height: 100%;
}
</style>
